<template>
    <NavBar>
    </NavBar>
    <ContentField>
        <h2 style="text-align:center;">emp_dt_view表</h2>
            <table class="table table-secondary table-hover" style="margin-top:20px;">
            <thead class="table-info text-center">
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">工号(workno)</th>
                    <th scope="col">姓名(name)</th>
                    <th scope="col">性别(gender)</th>
                    <th scope="col">年龄(age)</th>
                    <th scope="col">身份证号(idcard)</th>
                    <th scope="col">住址(address)</th>
                    <th scope="col">入职日期(entrydate)</th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for="emp in emps" :key="emp.id">
                    <th>{{ emp.id }}</th>
                    <td>{{ emp.workno }}</td>
                    <td>{{ emp.name }}</td>
                    <td v-if="emp.gender == '1'">男</td>
                    <td v-else>女</td>
                    <td>{{ emp.age }}</td>
                    <td v-if="emp.idcard == null">NULL</td>
                    <td v-else>{{ emp.idcard }}</td>
                    <td v-if="emp.address == null">NULL</td>
                    <td v-else>{{ emp.address }}</td>
                    <td>{{ formatDate(emp.entrydate,"yyyy-MM-dd") }}</td>
              </tr>
            </tbody>
            </table>

           <PageNav :isFirstPage="isFirstPage" :isLastPage="isLastPage" :prePage="prePage" :nextPage="nextPage" :pageSize="pageSize" :pageNum="pageNum" :totalPage="totalPage" @getPage="getPage">
           </PageNav>
    </ContentField>
</template>

<script>

import NavBar from "@/components/teacher/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';
import PageNav from '@/components/commons/PageNav.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import formatDate from '@/utils/DateFormatter';

export default{
    name: 'defaultTable',
    components: {
        NavBar,
        ContentField,
        PageNav,
    },
    computed: {
        formatDate(){
            return formatDate;
        },
    },

    setup(){
        const store = useStore();
        let emps = ref([]);

        let PageNum ;  //当前页数
        let PageSize ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (PageNum,PageSize)=>{   //按页查询用户信息
            //console.log('PageNum:');
            //console.log(PageNum);
            //console.log('PageSize:');
            //console.log(PageSize);

            $.ajax({
            url: 'http://localhost:8090/sls/empDtView/getPageInfo/' + PageNum +'/' + PageSize ,
            type: "get",
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                console.log(resp);
                emps.value = resp.list;
                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;
                
                updatePageInfo(pageNum, pageSize);
                // console.log('resp.list:');
                // console.log(resp.list); 
            },
            error(resp){
                console.log(resp);
            }
            });
        }

        // getPage(pageNum,pageSize);

        return{
            updatePageInfo,
            getPage,
            store,
            emps,
            PageNum,
            PageSize,
            pageNum,
            pageSize,
            totalNum,
            totalPage,
            isFirstPage,
            isLastPage,
            nextPage,
            prePage,
        }
    }
}
</script>



<style scoped>

</style>